<template>
	<view class="fpmw-page">
		<view class="fpmw-region-cover overall-width">
			<image class="cover" style="height: 270px;" src="https://p0.meituan.net/dpmerchantpic/72e49aa6d350643ef2cb329fd1ad062b255881.jpg%40320w_240h_1e_1c_1l%7Cwatermark%3D0">
			</image>
		</view>
		<view class="fpmw-region-shop-info overall-width">
			<view class="container">
				<text class="title">兰亭荟减脂•全国连锁（大溪沟店）</text>
				<view class="power">
					<image class="star" src="@/static/img/star.png">
					</image>
					<image class="star" src="@/static/img/star.png">
					</image>
					<image class="star" src="@/static/img/star.png">
					</image>
					<image class="star" src="@/static/img/star.png">
					</image>
					<image class="star" src="@/static/img/star-half.png" >
					</image>
					<text class="color">4.2</text>
				</view>
				<view class="address">
					<image class="fpmw-address-icon" src="@/static/img/address-gray-ico.png">
					</image>
					<text class="text">渝中区渝中区大溪沟人和街58-2号</text>
				</view>
			</view>
		</view>
		<view class="fpmw-region-deail-base-info overall-width">
			<view class="container">
				<view class="head">
					<text class="title">团购套餐</text>
				</view>
				<view class="body">
					<view class="left">
						<image src="https://p0.meituan.net/dpmerchantpic/72e49aa6d350643ef2cb329fd1ad062b255881.jpg%40320w_240h_1e_1c_1l%7Cwatermark%3D0" class="deal-head" style="height: 58px;">
						</image>
					</view>
					<view class="right">
						<text class="title">【瘦部位必备】局部靶向塑形体验</text>
						<text class="text">美容美体</text>
						<view class="price-area text">
							<view class="back-color final">券后价<text
									class="final-price">￥297</text>
							</view>
							<view class="market">门市价<text
									class="market-price">498</text>
							</view>
							<view>半年销量<text>-1</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fpmw-region-deail-detail overall-width">
			<view class="container">
				<view class="head">
					<text class="title">团购详情</text>
				</view>
				<view class="body">
					
					<view class="table">
						<view class="thead">
							<view class="th">名称</view>
							<view class="th">数量</view>
							<view class="th">单价(元)</view>
						</view>
						<view class="tbody"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="fpmw-region-bottom overall-width">
			<view class="content">
				<view class="coupon">
					<view class="coupon-price">
						<view class="coupon-discount">领券省<text
								style="color: rgb(244, 47, 47);     font-size: 34rpx;;">201</text>元
						</view>
						<view class="coupon-limit">满5元可用</view>
					</view>
					<view class="coupon-date">有效时间：2021-11-03~2021-11-09</view>
				</view>
				<view class="receive-btn">
					<text>领券下单</text>
				</view>
			</view>
		</view>
		<!---->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	/* 公共样式 */
	.color{
		color: #fb8007
	}

	.back-color{
		background-color: #ff8546 !important
	}

	.title{
		    font-size: 30rpx;;
		font-weight: 700
	}

	.text{
		font-size: 24rpx;
		color: #666
	}

	.overall-width{
		width: 100%;
		background-color: #fff
	}

	.container{
		margin: 7px
	}

	.fpmw-page{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column
	}

	/* 头部封面 */
	.fpmw-region-cover .cover{
		display: block;
		width: 100%
	}

	/* 商家信息区域 */
	.fpmw-region-shop-info{
		margin-bottom: 7px;
		display: flex;
		flex-flow: column
	}

	.fpmw-region-shop-info .power{
		display: flex;
		align-items: center
	}

	.fpmw-region-shop-info .power .star{
		width: 14px;
		height: 14px;
		margin-right: 7px
	}

	.fpmw-region-shop-info .power text{
		font-weight: 700
	}

	.fpmw-region-shop-info .address{
		display: flex;
		align-items: center
	}

	.fpmw-region-shop-info .address .fpmw-address-icon{
		width: 14px;
		height: 14px;
		margin-right: 7px
	}

	/* 团购基本信息区域 */
	.fpmw-region-deail-base-info{
		margin-bottom: 7px
	}

	.fpmw-region-deail-base-info .body{
		display: flex;
		box-shadow: 0 0 3px #ccc;
		border-radius: 9px;
		padding: 7px;
		align-items: center;
		margin-top: 7px
	}

	.fpmw-region-deail-base-info .body .deal-head{
		width: 76px;
		border-radius: 9px;
		display: block
	}

	.fpmw-region-deail-base-info .body .right{
		display: flex;
		flex-flow: column;
		margin-left: 7px;
		width: 100%
	}

	.fpmw-region-deail-base-info .body .right .price-area{
		display: flex;
		align-items: center;
		justify-content: space-between
	}

	.price-area .final{
		padding: 1px 4px;
		color: #333;
		font-size: 24rpx;
		border-radius: 4px
	}

	.price-area .final-price{
		    font-size: 28rpx;;
		color: #f42f2f;
		font-weight: 700
	}

	.price-area .market{
		color: #666
	}

	.price-area .market-price{
		color: #666;
		text-decoration: line-through
	}

	/* 团单详情区域  */
	.fpmw-region-deail-detail{
		margin-bottom: 64px
	}

	.fpmw-region-deail-detail rich-text{
		font-size: 24rpx;
		text-align: left
	}

	/* 表格 */
	.table{
		font-size: 24rpx;
		text-align: left
	}

	.table .thead{
		font-weight: 700;
		display: flex;
		align-items: center
	}

	.table .thead .th{
		width: 30%
	}

	.table .tbody .tr{
		display: flex;
		align-items: center
	}

	.table .tbody .td{
		width: 30%
	}

	/* 底部区域 */
	.fpmw-region-bottom{
		position: fixed;
		bottom: 0;
		height: 57px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fbfbfb
	}

	.fpmw-region-bottom .content{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 340px
	}

	.fpmw-region-bottom .content .coupon{
		display: flex;
		flex-flow: column;
		color: #333
	}

	.coupon .coupon-price{
		display: flex;
		align-items: baseline
	}

	.coupon .coupon-price .coupon-discount{
		    font-size: 28rpx;;
		font-weight: 700
	}

	.coupon .coupon-price .coupon-limit{
		font-size: 24rpx;
		margin-left: 7px
	}

	.coupon .coupon-date{
		font-size: 24rpx
	}

	.fpmw-region-bottom .content .receive-btn{
		width: 124px;
		height: 38px;
		background: #f42f2f;
		    font-size: 30rpx;;
		font-weight: 700;
		color: #fff;
		border-radius: 38px;
		box-sizing: border-box;
		box-shadow: 0 0 1px #969696;
		border: 0;
		display: flex;
		justify-content: center;
		align-items: center
	}
</style>
